/**
 * 库存信息管理
 */
import React, { Component } from 'react';
import './TableInfo.scss';
// 商品数据显示表格组件
import GoodsInfoTable from '../../components/GoodsInfoTable';   
// 分页器组件
import PagingGroup from '../../components/PagingGroup';

export default class TableInfo extends Component {
    constructor(props) {
        super(props);
        this.state = {
            // 商品信息
            goodsInfo: [],
            // 是否显示分页按钮组
            pagingGroupShow: true,
            // 分页数字按钮
            pagingNumBtn: [],
            // 每页显示的数据条数
            singlePageQuantity: 3,
            // 当前选中的页数
            currentPage: 1,
            // 共有几页
            pageNumTotal: 0,
            // 首页和末页状态
            disabledFirst: true,
            disabledLast: false
        }
        // 跳转到指定页的输入框
        this.goToPageInput = React.createRef();
    }

    /**
     * 声明周期：组件挂载完成后
     */
    componentDidMount() {
        // 调用设置生成分页按钮组函数
        this.setPagingNumGroup();
    }
    /**
     * 声明周期：组件将要卸载时
     */
    componentWillUnmount() {
        // 为了解决当组件还在执行异步任务时，组件已经被卸载的情况
        this.setState(() => null);
    }

    /**
     * 设置生成分页按钮组函数
     */
    setPagingNumGroup = () => {
        // 根据获取的商品数据进行数据及视图操作
        this.getGoodsInfo().then(res => {
            debugger;
            const { singlePageQuantity, currentPage } = this.state;
            // 获取总数据量
            const data_leng = res.length;
            // 计算出需要分页的数量
            const pageNumTotal =  Math.ceil(data_leng / singlePageQuantity);
            // 创建一个临时分页数字数组
            const tempArr = [];
            // 生成分页按钮数组
            for(let i = 0; i < pageNumTotal; i++) {
                tempArr.push(i + 1);
            }
            // 重新设置数字分页按钮
            this.setState({
                pagingNumBtn: tempArr,
                pageNumTotal
            });
            // 截取所需显示的数据
            const showGgoodsInfo = res.slice(
                (currentPage - 1) * singlePageQuantity,
                (currentPage - 1) * singlePageQuantity + singlePageQuantity
            )
            // 渲染表格数据
            this.setState(() => ({
                goodsInfo: showGgoodsInfo
            }));

            // 如果数据只有一页
            if(currentPage === 1 && currentPage === pageNumTotal) {
                // 隐藏分页按钮组
                this.setState({
                    pagingGroupShow: false
                })
            }
            // 如果是第一页
            else if(currentPage === 1) {
                this.setState({
                    disabledFirst: true,
                    disabledLast: false
                })
            }
            // 如果是最后一页
            else if(currentPage === pageNumTotal) {
                this.setState({
                    disabledFirst: false,
                    disabledLast: true
                })
            }
            // 既不是第一页也不是最后一页
            else {
                this.setState({
                    disabledFirst: false,
                    disabledLast: false
                })
            }
        });
    }
   
    /**
     * 请求服务端商品数据函数
     */
    async getGoodsInfo() {
        const url = '/store-manage/common/goods-manage/goods-info.php';
        return await new Promise(resolve => {
            React.axios.get(url).then(res =>  resolve(res.data));
        });
    }

    /**
     * 分页按钮中的跳转到指定页
     * @param { String } value 输入框内的值
     */
    ToAppointPage = (val) => {
        if(val > this.state.pageNumTotal) {
            alert(`目前只有 ${this.state.pageNumTotal} 页的数据，请确保输入的值不大于最大页数！`);
            return;
        }
        // 设置需要跳转到的页
        this.setState({
            currentPage: ~~val
        });
        // 重新设置分页
        this.setPagingNumGroup();
    }

    /**
     * 设置当前选中页并生成新的数字分页按钮组函数
     * @param { Number } currentPageNum 当前需要选中的页数
     */
    resetPagingGroup = (currentPageNum) => {
        this.setState({
            currentPage: currentPageNum
        });
        this.setPagingNumGroup();
    }

    /**
     * 跳转到商品编辑页面
     */
    gotoFormInfoEdit = (goods) => {
        this.props.history.push({
            pathname: '../FormInfo/FormInfo',
            state: goods
        });
    }

    render() {
        const { goodsInfo } = this.state;
        return (
            <div className="container">
                <h1>库存信息管理</h1>
                
                {/* 数据表格部分 */}
                <GoodsInfoTable 
                    goodsInfo={goodsInfo} 
                    setPagingNumGroup={this.setPagingNumGroup}
                    gotoFormInfoEdit={this.gotoFormInfoEdit}
                />

                {/* 分页按钮部分 */}
                <PagingGroup
                    pageData={this.state}
                    resetPagingGroup={this.resetPagingGroup}
                    ToAppointPage={this.ToAppointPage}
                />
            </div>
        )
    }
}
